<template>
	<view class="body">
		<xk-header title="用车受理"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
			<view class="danhao">申请单号：{{car_reserve_id}}</view>
			<u--form
			labelPosition="left"
			:model="formdata"
			:rules="rules"
			ref="uviewForm"
			>
				<u-form-item
					label="车辆信息*:"
					prop="vehicle_id"
					borderBottom
					ref="vehicle_id"
					labelWidth="120"
				>
				<view style="text-align:right;width:100%" @click="openCheliang">{{cheliangname?cheliangname:'请选择车辆'}} <u-icon style="display: inline-flex;" name="arrow-right"></u-icon></view>
				</u-form-item>

				<u-form-item
					label="司机*:"
					prop="receiver_dirver_id"
					borderBottom
					ref="receiver_dirver_id"
					labelWidth="120"
				>
				<view style="text-align:right;width:100%" @click="openSiji">{{sijiname?sijiname:'请选择司机'}} <u-icon style="display: inline-flex;" name="arrow-right"></u-icon></view>
				</u-form-item>

				<u-form-item
					label="受理结果:"
					prop="receiver_results"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u-radio-group v-model="formdata.receiver_results" placement="row">
					<u-radio shape="square" v-for="(item, index) in radioList" :key="index" :name="item.name"
						:disabled="item.disabled" active-color="#25afa2" :label="item.nameText" style="margin-right:20px;">
						{{item.nameText}}
					</u-radio>
				</u-radio-group>
				</u-form-item>

				<u-form-item
					label="受理原因*:"
					prop="receiver_content"
					borderBottom
					ref="receiver_content"
					labelWidth="120"
				>
				<u--input v-model="formdata.receiver_content" placeholder="请输入受理原因" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="受理备注:"
					prop="apply_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>

				</u-form-item>
				<u--textarea v-model="formdata.apply_remark" placeholder="请输入备注信息" height="50" count confirmType="done"></u--textarea>
			</u--form>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">确定提交</view>
		</view>
		<view style="height:100px;"></view>
		<u-popup
		:show="showSiji"
		:round="8"
		closeable
		@close="showSiji=false"
		customStyle="height:60%"
		>
			<view class="wy-title">司机信息列表</view>
			<view class="wybox">
				<view class="search-box">
					<u-search shape="square" placeholder="登录号/司机名称/驾驶证等级" height="35" :showAction="false" v-model="sijiList.searchKey" @search="searchHandle"></u-search>
				</view>
				<view style="padding:15px 0px 15px 0px;">
				<u-radio-group v-model="sijiList.receiver_dirver_id" placement="column">
					<u-radio shape="square" v-for="(item, index) in sijiList.data" :key="index"
					:name="index"
					active-color="#25afa2"
					:label="item.user_name+'_('+item.driver_license_grade+')_'+'(登录号:'+item.user_code+')'"
					style="margin-bottom:10px;"
					></u-radio>
				</u-radio-group>
				</view>
				<view class="btn-dengji"><u-button type="primary" shape="circle" text="确定" @click="confirmSJ"></u-button></view>
			</view>
		</u-popup>

		<u-popup
		:show="showCheliang"
		:round="8"
		closeable
		@close="showCheliang=false"
		customStyle="height:60%"
		>
			<view class="wy-title">车辆可预约信息列表</view>
			<view class="wybox">
				<view class="search-box">
					<u-search shape="square" placeholder="车辆编号/车辆名称/资产所属部门/所属公司" height="35" :showAction="false" v-model="cheliangList.searchKey" @search="searchHandlecl"></u-search>
				</view>
				<view style="padding:15px 0px 15px 0px;">
				<u-radio-group v-model="cheliangList.vehicle_id" placement="column">
					<u-radio shape="square" v-for="(item, index) in cheliangList.data" :key="index"
					:name="index"
					active-color="#25afa2"
					:label="item.vehicle_name+'_('+item.vehicle_number+')_'+'('+item.company_name+')'"
					style="margin-bottom:10px;"
					></u-radio>
				</u-radio-group>
				</view>
				<view class="btn-dengji"><u-button type="primary" shape="circle" text="确定" @click="confirmCL"></u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCheliang:false,
				cheliangname:'',
				showSiji:false,
				sijiname:'',
				receiver_dirver_id:'',
				car_reserve_id:'',
				radioList:[
					{nameText:"同意",name:"10",disabled:false},
					{nameText:"不同意",name:"20",disabled:false},
				],
				Tshow:false,
				apply_end_time:Number(new Date()),
				formdata:{
					"car_reserve_id": "",
					"receiver_results": "10",
					"receiver_content": "",
					"receiver_remark": "",
					"vehicle_id": "1518834937013219328",
					"receiver_dirver_id": "1536197499489501184",
					"isSubmit": false
				},
				rules: {
					'apply_user_name': {
						type: 'string',
						required:true,
						message: '请填写联系人',
						trigger:['blur','change']
					},
					'apply_dept_name': {
						type: 'string',
						required:true,
						message: '请填写申请人单位',
						trigger:['blur','change']
					},
					'apply_phone': {
						type: 'string',
						required:true,
						message: '请填写电话号码',
						trigger:['blur','change']
					},
					'caution_money': {
						type: 'string',
						required:true,
						message: '请填写保证金',
						trigger:['blur','change']
					},
				},
				cheliangList:{
					vehicle_id:0,
					searchKey:'',
					startNum: 0,
					isAll: false,
					data: []
				},
				sijiList:{
					receiver_dirver_id:0,
					searchKey:'',
					startNum: 0,
					isAll: false,
					data: []
				}
			}
		},
		onLoad(opts){
		  if(opts.car_reserve_id){
			  this.car_reserve_id=opts.car_reserve_id
			  this.formdata.car_reserve_id=opts.car_reserve_id
		  }
		},
		onShow(){

		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		methods: {
			openCheliang(){
				this.showCheliang=true;
				this.queryListInfocl(true);
			},
			openSiji(){
				this.showSiji=true;
				this.queryListInfo(true);
			},
			searchHandle(){
				this.sijiList.startNum=0;
				this.sijiList.isAll=false;
				this.queryListInfo(true)
			},
			searchHandlecl(){
				this.cheliangList.startNum=0;
				this.cheliangList.isAll=false;
				this.queryListInfocl(true)
			},

			confirmSJ(){
				console.log(this.sijiList.data[this.sijiList.receiver_dirver_id])
				var getname=this.sijiList.data[this.sijiList.receiver_dirver_id];
				this.showSiji=false
				this.sijiname=getname.user_name+"("+getname.driver_license_grade+")";
				this.formdata.receiver_dirver_id=getname.driver_file_id
			},
			confirmCL(){
				console.log(this.cheliangList.data[this.cheliangList.vehicle_id])
				var getname=this.cheliangList.data[this.cheliangList.vehicle_id];
				this.showCheliang=false
				this.cheliangname=getname.vehicle_name+"("+getname.vehicle_number+")";
				this.formdata.vehicle_id=getname.vehicle_id
			},
			confirmT(e){
				console.log(e)
				this.formdata.apply_end_time=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.Tshow=false
			},
			cancelT(){
				this.Tshow=false
			},
			cancelDate(){
				this.showDate=false;
			},
			doneSubmit(){
				this.$refs.uviewForm.validate().then(res => {
					//uni.$u.toast('校验通过')
					console.log(this.formdata)
					this.$util.confirm({
						content: "确定提交受理？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/poCarReserve/accept",
								data: this.formdata,
							}).then(res => {
								uni.navigateBack()
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
			},
			//车辆可预约信息列表
			async queryListInfocl(flag) {
				console.log('queryListInfo',this.cheliangList)
				let startNum = this.cheliangList.startNum;
				if(flag === true && startNum != 0) {
					return;
				}
				if(this.cheliangList.isAll) {
					return; // 加载完成
				}

				var statusName='CAN_RESERVE';

				//初始化查询条件
				let pageSize=3;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.cheliangList.searchKey){
					params.searchKey = this.cheliangList.searchKey
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.get_campusVehicleData_getCampusVehicleList(params,statusName)
				res = res.CAN_RESERVE;
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.cheliangList.data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('res',res)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.cheliangList.isAll = true
				}
				if(this.cheliangList.startNum == 0){
					this.cheliangList.data = res
				}else{
					this.cheliangList.data = this.cheliangList.data.concat(res)
				}
				this.cheliangList.startNum += pageSize
				this.isloading=false
				this.loadmoreStatus='nomore'
			},
			//司机信息列表
			async queryListInfo(flag) {
				console.log('queryListInfo',this.tabsList)
				let startNum = this.sijiList.startNum;
				if(flag === true && startNum != 0) {
					return;
				}
				if(this.sijiList.isAll) {
					return; // 加载完成
				}

				var statusName='CAN_RESERVE';

				//初始化查询条件
				let pageSize=3;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.sijiList.searchKey){
					params.searchKey = this.sijiList.searchKey
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.get_PoDriverFileInfoList(params,statusName)
				res = res.CAN_RESERVE;
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.sijiList.data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('res',res)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.sijiList.isAll = true
				}
				if(this.sijiList.startNum == 0){
					this.sijiList.data = res
				}else{
					this.sijiList.data = this.sijiList.data.concat(res)
				}
				this.sijiList.startNum += pageSize
				this.isloading=false
				this.loadmoreStatus='nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 30px 10px;
	margin:10px;
	border-radius:6px;
}
.grey-t{
	color:#CCCCCC;
}
.loadText{
	padding:5px 0px 20px 0px;
}
.danhao{
	font-size:18px;
	padding:10px 0px 10px 0;
	font-weight:bold;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	margin:15px;
	font-size:28rpx;
	border-radius:8px;
}
</style>
